<template>
  <div class="catalog-gallery" v-ps>
    <ul class="catalog-gallery-list">
      <li v-for="item in data" :key="item.id">
        <ws-catalog-box
          :data="item"
          :preview="false"
          @click="handleItemClick"
          @delete="handleDelete">
        </ws-catalog-box>
      </li>
    </ul>
  </div>
</template>

<script>

import WsCatalogBox from './CatalogBox'

export default {
  name: 'WsCatalogGallery',
  components: { WsCatalogBox },
  props: {
    data: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
    }
  },
  methods: {
    handleDelete (item, vm) {
      this.$emit('delete', item, this)
    },

    handleItemClick (item, vm) {
      this.$emit('click', item, this)
    }
  }
}
</script>
